<template>
  <div>
    <h1>信息反馈</h1>
    <Table border :columns="columns1" :data="data1" style="border-radius: 7px;">
      <!-- 表格信息 -->
      <template slot-scope="{ row }" slot="name">
            <p class="text_row_1">{{ row.feed_content }}</p>
        </template>
        <!-- 查看按钮 -->
        <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="default" icon="ios-search-outline" style="margin-right: 5px" @click="show(index)">查看详情</Button>
          </template>
    </Table>
    <!-- 分页区域 -->
    <Page :total="dataCount" :page-size="pageSize" show-elevator @on-change="changePage"/>
  </div>
  
  
</template>
<script>
import {Admin_FeedData} from '../../../server/home.js'
export default {
  data(){
    return {
      // 表头
      columns1:[
        {
          title:'反馈ID',
          key:'feed_id',
          align:'center',
        },
        {
          title:'反馈用户',
          key:'user_name',
          align:'center',
        },
        {
          title:'反馈信息',
          slot:'name',
          key:'feed_content',
          align:'center',
        },
        {
          title:'反馈时间',
          key:'add_time',
          align:'center',
        },
        {
          title:'操作',
          slot:'action',
          width:300,
          align:'center',
        }

      ],
      data1:[],//信息反馈总数据
      dataCount:0,//总长度
      pageSize:5,//每页长度
      ajaxData:[]//用来装载的空数组
    }
  },
  methods: {
    // 点击查看详情
    show (index) {
      this.$Modal.info({
          title: '详细信息',
          content: `反馈用户：${this.data1[index].user_name}<br>反馈信息：${this.data1[index].feed_content}<br>反馈时间：${this.data1[index].add_time}`
      })
    },
    // 获取反馈数据
    getFeedData(){
      Admin_FeedData().then(res=>{
      
        this.data1 = res.data;//将获取的数据存入总数据中
      
        this.dataCount = this.data1.length;//获取数组长度，绑定到页码上
        this.ajaxData = this.data1;//将总数据先装在一个空数组

        if(this.data1.length < this.pageSize){//当总数组长度小于每页长度时
          this.data1 = this.ajaxData;
        }else{
          this.data1 = this.ajaxData.slice(0,this.pageSize);
        }
      })
    },
    // 分页
    changePage(index){

      const p_start = (index-1) * this.pageSize;//起始位置
      const p_end = index * this.pageSize;//结束位置
      this.data1 = this.ajaxData.slice(p_start,p_end);//每页打印数量
    }
  },
  created() {
    this.getFeedData()
    
  }
}
</script>
<style scoped>
.ivu-table-cell {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
h1{
  text-align: center;
}
</style>